<template>
  <div>
    <el-input v-model="userNames" readonly :placeholder="placeholder" :size="size">
      <template slot="append">
        <el-button type="primary" :disabled="disabled" @click="showModal">
          <svg-icon icon-class="add_user" style="font-size:21px" />
        </el-button>
      </template>
    </el-input>

    <modal ref="modal" v-model="userIds" :show.sync="open" v-bind="$attrs" v-on="$listeners" @ok="callBack" @initComp="initComp" />
  </div>
</template>

<script>
import modal from './modal'
export default {
  name: 'SelectUserByDept',
  components: { modal },
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'medium'
    }
  },
  data() {
    return {
      userIds: '',
      userNames: '',
      open: false
    }
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(val) {
        this.userIds = val
      }
    }
  },
  methods: {
    // 用来显示已选择的用户
    initComp(userNames) {
      this.userNames = userNames
    },
    showModal() {
      this.$refs.modal.showModal()
    },
    callBack(rows, idstr) {
      if (!rows) {
        this.userIds = ''
        this.userNames = ''
      } else {
        let temp = ''
        for (const item of rows) {
          temp += ',' + item.nickName
        }
        this.userNames = temp.substring(1)
        this.userIds = idstr
      }
      this.$emit('input', idstr)
      this.open = false
    }
  }
}
</script>
